import { Descriptions, Tag } from "antd";
import React from "react";
import styles from "@/styles/DiffInfoDisplay.module.sass";
import { colorMap, RefactoringType } from "@/types/RefactoringType";

export default function DiffInfoDisplay(props: {
  title: string;
  data: { [key: string]: string };
  refactorType?: RefactoringType[];
}) {
  const { data, title, refactorType } = props;
  return (
    <>
      <div className={styles.info}>
        <Descriptions title={title} bordered size="small">
          {Object.keys(data)
            .filter((k) => k !== "cuPairsWithDetector")
            .map((key) => (
              <Descriptions.Item span={3} label={key} key={key}>
                {data[key].toString()}
              </Descriptions.Item>
            ))}
        </Descriptions>
      </div>
      {refactorType && (
        <div className={styles.sticker}>
          <h3>重构类型</h3>
          <div className="tag">
            {refactorType.map((r) => (
              <Tag color={colorMap[r.toString()]} key={r}>
                {r}
              </Tag>
            ))}
          </div>
        </div>
      )}
    </>
  );
}
